<template>
    <div class="welcome-container">
      <!-- 背景粒子效果 -->
      <Particles
        id="tsparticles"
        :options="particlesOptions"
        @particles-loaded="particlesLoaded"
      />
      
      <!-- 动画内容 -->
      <div class="welcome-content">
        <transition name="fade" mode="out-in">
          <div v-if="currentStep === 1" class="welcome-step">
            <h1 class="animated-text">欢迎您来到我们项目</h1>
          </div>
          
          <div v-else-if="currentStep === 2" class="welcome-step">
            <h1 class="animated-text">项目多次进行deepseek模型心理专业化训练</h1>
          </div>

          <div v-else-if="currentStep === 3" class="welcome-step">
            <h1 class="animated-text">VUE大作业！~~~</h1>
          </div>

          <div v-else class="welcome-step final-step">
            <h1 class="final-title">AI督导师学生心理测评</h1>
            <p class="subtitle">为您提供专业的心理评估与指导</p>
            <el-button 
              type="primary" 
              size="large" 
              round 
              @click="enterSystem"
              class="enter-btn"
            >
              进入系统
            </el-button>
          </div>
        </transition>
      </div>
      
      <!-- 背景装饰元素 -->
      <div class="decor decor-1"></div>
      <div class="decor decor-2"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { loadSlim } from 'tsparticles-slim'
  
  const router = useRouter()
  const currentStep = ref(1)
  
  // 粒子效果配置
  const particlesOptions = {
    background: {
      color: "#0a1f3a"
    },
    particles: {
      number: {
        value: 80,
        density: {
          enable: true,
          area: 800
        }
      },
      color: {
        value: "#ffffff"
      },
      shape: {
        type: "circle"
      },
      opacity: {
        value: 0.5,
        random: true
      },
      size: {
        value: 3,
        random: true
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 2,
        direction: "none",
        random: true,
        straight: false,
        outModes: {
          default: "bounce"
        }
      }
    },
    interactivity: {
      events: {
        onHover: {
          enable: true,
          mode: "repulse"
        },
        onClick: {
          enable: true,
          mode: "push"
        }
      },
      modes: {
        repulse: {
          distance: 100
        },
        push: {
          quantity: 4
        }
      }
    }
  }
  
  // 粒子初始化
  const particlesInit = async (engine) => {
    await loadSlim(engine)
  }
  
  const particlesLoaded = async (container) => {
    console.log("粒子背景加载完成")
  }
  
  // 动画步骤控制
  onMounted(() => {
    // 初始显示步骤1
    currentStep.value = 1
    
    // 1.5秒后切换到步骤2
    setTimeout(() => {
      currentStep.value = 2
    }, 1500)
    
    // 3秒后切换到步骤3
    setTimeout(() => {
      currentStep.value = 3
    }, 3000)
    
    // 4.5秒后切换到最终步骤
    setTimeout(() => {
      currentStep.value = 4
    }, 4500)
  })
    
  // 进入系统
  const enterSystem = () => {
    router.push('/login')
  }
  </script>
  
  <style lang="scss" scoped>
  .welcome-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  }
  
  #tsparticles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  .welcome-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
  }
  
  .welcome-step {
    padding: 40px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
  }
  
  .animated-text {
    font-size: 4rem;
    color: white;
    margin: 0;
    background: linear-gradient(45deg, #ffffff, #e6f7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 1.5s infinite alternate;
  }
  
  .final-step {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
  }
  
  .final-title {
    font-size: 3rem;
    color: white;
    margin: 0 0 20px 0;
    background: linear-gradient(45deg, #ffffff, #e6f7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
  }
  
  .enter-btn {
    padding: 15px 40px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #409EFF, #67C23A);
    border: none;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(64, 158, 255, 0.3);
    }
  }
  
  .decor {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.1;
  }
  
  .decor-1 {
    width: 300px;
    height: 300px;
    background: #409EFF;
    top: -100px;
    left: -100px;
  }
  
  .decor-2 {
    width: 200px;
    height: 200px;
    background: #67C23A;
    bottom: -50px;
    right: -50px;
  }
  
  /* 动画效果 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
  }
  
  @keyframes pulse {
    from {
      transform: scale(1);
      opacity: 0.8;
    }
    to {
      transform: scale(1.05);
      opacity: 1;
    }
  }
  </style>